<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <title>{$introduction.manufacturer}|维修保养记录详情|来拍车</title>
  <link rel="stylesheet" href="{:get_style_cdnurl()}app/css/common.css">
  <style type="text/css">
    
    body{
      background-color: #f7f7f7;
    }
    a,span,div{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    .generated-time{
      height: 42px;
      line-height: 42px;
      border-top: 1px solid #dadada;
      font-size: 12px;
      color: #b7b7b7;
      text-align: center;
    }
    div.section{
      background-color: #fff;
      border-top: 1px solid #ededed;
      border-bottom: 1px solid #ededed;
      color: #828282;
      font-size: 14px;
    }
    .section.s-detail{
      margin-top: 12px;
    }
    .section h3.title{
      padding: 14px;
      font-size: 16px;
      color: #353535;
      position: relative;
      border-bottom: 1px solid #ededed;
    }
    .section h3 span.line{
      width: 3px;
      height: 18px;
      position: absolute;
      left: 0;
      top: 16px;
      background-color: #307de9;
    }
    .car-info{
      width: 92%;
      margin: 0 auto;
      padding: 20px 6px;
    }
    .car-info .car-type{
      font-size: 18px;
      color: #353535;
      padding-bottom: 16px;
    }
    table{
      width: 92%;
      margin: 0 auto;
    }
    table tr{
      border-top: 1px solid #ededed;
    }
    table tr td{
         padding: 14px 6px;
      line-height: 22px;
    }
    table tr td:first-child{
      width: 26%;
    }
    tr td:nth-child(2){
      width: 1px;
    }
    tr td:last-child{
      padding-left: 8%;
    }
    td span.split-line{
          display: inline-block;
    width: 1px;
    height: 100%;
    background-color: #ededed;
    vertical-align: bottom;
    margin-right: 14%;
    }
    .s-detail .d-title:first-of-type{
      border-top: 0;
    }
    .d-title{
      margin: 0 auto;
      padding: 16px 6%;
      overflow: hidden;
      border-top: 1px solid #ededed;
    }
    .d-title span{color: #307de9;}
    .d-title span.fr{
        display: block;
        clear: left;
        float: none;
        padding-top: 2px;
        padding-left: 26px;
    }
    .d-title span:first-child{
      float: left;
      position: relative;
      padding-left: 26px;
    }
    .fr{
      float: right;
    }
    .d-title span i{
      position: absolute;
      width: 16px;
      height: 16px;
      background: url('{:get_style_cdnurl()}app/images/weixiu.png') no-repeat;
      background-size: contain;
      top: 1px;
      left: 0;
    }
    .btn{
      height: 48px;
      line-height: 48px;
      text-align: center;
    }
    .btn span{
      color: #307de9;
      font-size: 12px;
      text-decoration: underline;
      display: inline-block;
    width: 60%;
    }
    .exceptions{
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 10;
      background-color: rgba(0,0,0,.5);
    }
    .exceptions .content{
          width: 68%;
    background-color: #fff;
    position: absolute;
    left: 16%;
    top: 15%;
    border-radius: 5px;
    padding-top: 18px;
    }
    /**
     *  iPhone 5/5s landscape & portrait
     */
    /*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {*/
    @media (max-device-height: 568px){
      .exceptions .content{
            width: 76%;
          left: 12%;
          top: 10%;
      }
    }
    @media (max-device-height: 480px){
      .exceptions .content{
        width: 82%;
        left: 9%;
        top: 8%;
      }
    }
    .c-title {
        text-align: center;
        padding-bottom: 12px;
        font-size: 20px;
        color: #307de9;
    }
    .exceptions p{
      font-size: 12px;
      color: #828282;
      line-height: 24px;
          padding: 0 24px;
    }
    .exceptions .c-btn{
          font-size: 16px;
    color: #307de9;
    line-height: 46px;
    border-top: 1px solid #dddddd;
    text-align: center;
    margin-top: 18px;
    }
  </style>
<body>
  <div class="section">
    <h3 class="title"><span class="line"></span>基本信息</h3>
    <div class="car-info">
      <div class="car-type">{$introduction.manufacturer}</div>
      <div class="car-vin">VIN：{$introduction.vin}</div>
    </div>
    <table>
      <tr>
        <td>品牌</td>
        <td><span class="split-line"></span></td>
        <td>{$introduction.manufacturer_1}</td>
      </tr>
      <tr>
        <td>年款</td>
        <td><span class="split-line"></span></td>
        <td>{$introduction.makedate}</td>
      </tr>
      <tr>
        <td>变速箱</td>
        <td><span class="split-line"></span></td>
        <td>{$introduction.transmissiontype}</td>
      </tr>
      <tr>
        <td>排量</td>
        <td><span class="split-line"></span></td>
        <td>{$introduction.transmissiontype}</td>
      </tr>
    </table>
  </div>
  <div class="section s-detail">
    <h3 class="title"><span class="line"></span>详细记录</h3>
    <foreach name="record" item="v" key="k">
    <div class="d-title">
      <span><i></i>{$v.date}</span>
      <span class="fr">{$v.type}</span>
    </div>
    <table>
      <tr>
        <td>公里数</td>
        <td><span class="split-line"></span></td>
        <td>{$v.mileage}公里</td>
      </tr>
      <tr>
        <td>项目</td>
        <td><span class="split-line"></span></td>
        <td>{$v.content}</td>
      </tr>
      <tr>
        <td>材料</td>
        <td><span class="split-line"></span></td>
        <td>
            <if condition="$v.material eq ''">
                暂无数据
            <else/>
            {$v.material}
            </if>
        </td>
      </tr>
    </table>
   </foreach>   
  </div>

  <div class="btn"><span>点击查看免责条款</span></div>
  <div class="exceptions">
    <div class="content">
      <div class="c-title">免责条款</div>
      <div class="c-text">
        <p>一、本服务数据来源于第三方鉴定机构，准确性和完整性仅供参考；</p>
        <p>二、历史记录说明：</p>
        <p>此记录所包含内容及判断，仅基于截止到记录购买日期车鉴定收集到的相关数据信息。关于此车辆其他信息（包括但不限于在非4S店或 非制造商授权店的维修保养信息）有可能未被采集和收录，本报告仅是二手车交易的参考资料之一，请结合实车勘验结果和试乘试驾体验，做出更准确的交易决策。</p>
      </div>
      <div class="c-btn">确定</div>
    </div>
  </div>
  <script type="text/javascript" src="{:get_style_cdnurl()}static/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $(".btn span").on("click", function(){
      $(".exceptions").show();
    });
    $(".exceptions, .c-btn").on("click", function(){
      $(".exceptions").hide();
    }).on("touchmove", function(e){
      e.preventDefault();
    });
    $(".exceptions .content").on("click", function(e){
      e.stopPropagation();
    });
  });
  </script>
</body>
</html>